﻿/*
 *
 * (c) Copyright Ascensio System SIA 2024
 *
 * This program is freeware. You can redistribute it and/or modify it under the terms of the GNU 
 * General Public License (GPL) version 3 as published by the Free Software Foundation (https://www.gnu.org/copyleft/gpl.html). 
 * In accordance with Section 7(a) of the GNU GPL its Section 15 shall be amended to the effect that 
 * Ascensio System SIA expressly excludes the warranty of non-infringement of any third-party rights.
 *
 * THIS PROGRAM IS DISTRIBUTED WITHOUT ANY WARRANTY; WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR
 * FITNESS FOR A PARTICULAR PURPOSE. For more details, see GNU GPL at https://www.gnu.org/copyleft/gpl.html
 *
 * You can contact Ascensio System SIA by email at sales@onlyoffice.com
 *
 * The interactive user interfaces in modified source and object code versions of ONLYOFFICE must display 
 * Appropriate Legal Notices, as required under Section 5 of the GNU GPL version 3.
 *
 * Pursuant to Section 7 § 3(b) of the GNU GPL you must retain the original ONLYOFFICE logo which contains 
 * relevant author attributions when distributing the software. If the display of the logo in its graphic 
 * form is not reasonably feasible for technical reasons, you must include the words "Powered by ONLYOFFICE" 
 * in every copy of the program you distribute. 
 * Pursuant to Section 7 § 3(e) we decline to grant you any rights under trademark law for use of our trademarks.
 *
*/

.line {
    position: absolute;
    display: none;
}

.line-1 {
    left: -96px;
    top: -350px;
}

.line-2 {
    right: -45px;
    top: -321px;
}

.line-3 {
    left: -96px;
    top: -125px;
}

.line-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background-image: url("img/main-page/circle.svg");
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 1;
}

.line-circle.line-1-circle-1 {
    offset-path: path("M97 414V340L64 319V212M64 214.5V213L97 187V20");
}

.line-circle.line-2-circle-1 {
    offset-path: path("M30 389V315L63 294V187");
}

.line-circle.line-3-circle-1 {
    offset-path: path("M97.0001 200V147L64.0001 126V4");
}

.line-circle.line-1-circle-1.animate,
.line-circle.line-2-circle-1.animate,
.line-circle.line-3-circle-1.animate {
    animation: circle 3s ease-in-out forwards;
}

.line-circle.line-1-circle-2.animate,
.line-circle.line-2-circle-2.animate,
.line-circle.line-3-circle-2.animate {
    animation: circle 4s ease-in-out 0.5s forwards;
}

.line-ellipse {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 59px;
    background-image: url("img/main-page/ellipse.svg");
    background-repeat: no-repeat;
    transform: rotate(90deg);
    opacity: 0;
}

.line-ellipse.line-1-ellipse-1 {
    offset-path: path("M97 175V33");
}

.line-ellipse.line-1-ellipse-2 {
    offset-path: path("M64 308V225");
}

.line-ellipse.line-1-ellipse-3 {
    offset-path: path("M97 402V380.198V352");
}

.line-ellipse.line-2-ellipse-1 {
    offset-path: path("M63 282V199");
}

.line-ellipse.line-2-ellipse-2 {
    offset-path: path("M30 377V362.227V327");
}

.line-ellipse.line-3-ellipse-1 {
    offset-path: path("M63.9999 114L64 16");
}

.line-ellipse.line-3-ellipse-2 {
    offset-path: path("M97 188V159");
}

.line-ellipse.line-1-ellipse-4 {
    transition: top 0.3s;
    opacity: 1;
}

.line-ellipse.line-2-ellipse-3 {
    transition: top 0.3s;
    opacity: 1;
}

.line-ellipse.line-3-ellipse-3 {
    transition: top 0.3s;
    opacity: 1;
}

.line-ellipse.line-1-ellipse-1.animate,
.line-ellipse.line-1-ellipse-2.animate,
.line-ellipse.line-1-ellipse-3.animate,
.line-ellipse.line-2-ellipse-1.animate,
.line-ellipse.line-2-ellipse-2.animate,
.line-ellipse.line-3-ellipse-1.animate,
.line-ellipse.line-3-ellipse-2.animate {
    animation: ellipse 3s ease-in-out forwards;
}

@keyframes circle {
    0% {
      offset-distance: 100%;
      opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
      offset-distance: 0%;
      opacity: 1;
    }
}

@keyframes ellipse {
    0% {
      offset-distance: 100%;
      opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
      offset-distance: 0%;
      opacity: 0;
    }
}

.main-items {
    display: grid;
    row-gap: 148px;
}

.main-item {
    position: relative;
    display: grid;
    grid-template-columns: 448px auto;
    column-gap: 32px;
    text-align: left;
}

.main-item.docspace .main-item-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
}

.main-item.docs {
    grid-template-columns: auto 352px;
}

.main-item.portals {
    grid-template-columns: 310px auto;
}

.main-item.docs .main-item-img {
    order: -1;
}

.main-item-img {
    position: relative;
    align-self: start;
}

.main-item-img.mobile {
    display: none;
}

.main-item.docs .main-item-img {
    padding-bottom: 78.595%;
}

.main-item.docspace .main-item-img {
    padding-bottom: 76.087%
}

.main-item.portals .main-item-img {
    padding-bottom: 69.974%;
}

.main-item-img .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    z-index: 2;
}

.main-item.docs .main-item-img .img {
    background-image: url("img/main-page/docs-light.png");
}

.main-item.docspace .main-item-img .img {
    background-image: url("img/main-page/docspace-light.png");
}

.main-item.portals .main-item-img .img {
    background-image: url("img/main-page/workspace-light.png");
}

.main-item .main-item-img:after {
    content: "";
    display: none;
    position: absolute;
    box-shadow: var(--color-box-shadow-primary);
    transition: box-shadow 0.3s;
    z-index: 1;
}

.main-item .main-item-img:hover:after {
    box-shadow: 0px 12px 100px 0px rgba(255, 111, 61, 0.20);
}

.main-item .main-item-img:after {
    display: block;
}

.main-item.docs .main-item-img:after {
    top: 10px;
    left: 20px;
    width: 88%;
    height: 86%;
}

.main-item.docspace .main-item-img:after {
    top: 30px;
    left: 48px;
    width: 83%;
    height: 81%;
}

.main-item.portals .main-item-img:after {
    top: 9px;
    left: 15px;
    width: 88%;
    height: 85%;
}

.main-item-wrapper {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    padding: 24px;
}

.main-item-title {
    margin: 0 0 24px;
}

.main-item-title a {
    display: block;
    font-size: 32px;
    line-height: 43px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--color-text-quaternary);
}

.main-item-title:hover a {
    color: #FF6F3D;
}

.main-item-description {
    margin: 0 0 8px;
    color: var(--color-text-primary);
    font-size: 14px;
    line-height: 21px;
}

.main-item-links {
    margin: 24px 0 0;
    list-style-type: none;
}

.main-item-links li {
    margin-bottom: 0;
}

.main-item-links a {
    display: flex;
    align-items: center;
    padding: 8px 0;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 21px;
    text-decoration: none;
}

.main-item-links a:before {
    content: "";
    display: inline-flex;
    margin-right: 24px;
    width: 32px;
    height: 32px;
    background-position-x: center;
    background-repeat: no-repeat;
}

.main-item-links a:hover {
    color: #FF6F3D;
}

.main-item-links a.jssdk:before {
    background-image: url("img/main-page/jssdk.svg");
}

.main-item-links a.plugin:before,
.main-item-links a.pluginssdk:before {
    background-image: url("img/main-page/plugins.svg");
}

.main-item-links a.docbuilder:before {
    background-image: url("img/main-page/doc-builder.svg");
}

.main-item-links a.desktop:before {
    background-image: url("img/main-page/desktop.svg");
}

.main-item-links a.backend:before {
    background-image: url("img/main-page/api.svg");
}

.main-item-links a.workspaceapi:before {
    background-image: url("img/main-page/workspace-api.svg");
}

.main-item-links a.workspaceapi:before {
    background-image: url("img/main-page/workspace-api.svg");
}

.main-item-links a.apisystem:before {
    background-image: url("img/main-page/self-hosted.svg");
}

.main-item-links a.officeapi:before {
    background-image: url("img/main-page/office-api.svg");
}

.main-item-links a.editors:before {
    background-image: url("img/main-page/docs-api.svg");
}

@media screen and (max-width: 1024px) {
    .main-items  {
        row-gap: 32px;
    }

    .main-item-wrapper {
        padding: 0;
    }

    .main-item {
        grid-template-columns: initial;
        column-gap: initial;
    }

    .main-item-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 32px;
    }

    .main-item-title {
        margin: 0 0 16px;
    }

    .main-item-title a {
        font-size: 22px;
        line-height: 29px;
    }

    .main-item-description {
        font-size: 13px;
        line-height: 20px;
    }

    .main-item-more a {
        font-size: 13px;
        line-height: 21px;
    }

    .main-item .main-item-img:after {
        display: none;
    }

    .main-item.docs .main-item-img,
    .main-item.docspace .main-item-img {
        padding-bottom: 73.478%;
    }
    
    .main-item.portals .main-item-img {
        padding-bottom: 74.394%;
    }

    .main-item-img.mobile {
        display: block;
    }

    .main-item-img.desktop {
        display: none;
    }

    .main-item-links {
        margin: 16px 0 0;
    }

    .main-item-links a {
        padding: 4px 0;
        font-size: 13px;
        line-height: 20px;
    }

    .main-item-links a:before {
        margin-right: 12px;
    }

    .main-item.docs {
        grid-template-columns: initial;
    }

    .main-item.docs .main-item-links {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    .main-item.docs .main-item-img {
        order: initial;
    }

    .main-item.portals {
        grid-template-columns: initial;
    }

    .main-item-links {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: center;
        gap: 4px;
    }
}

@media screen and (max-width: 592px) {
    .main-item-body {
        grid-template-columns: initial;
        gap: 16px;
    }

    .main-item-title a {
        font-size: 18px;
        line-height: 24px;
    }

    .main-item-links {
        padding: 0 0 0 4px;
    }

    .main-item-links a {
        padding: 4px 0;
    }

    .main-item.docs .main-item-img {
        order: initial;
    }

    .main-item.docs .main-item-links,
    .main-item.docspace .main-item-links {
        grid-template-columns: initial;
    }

    .main-item-links {
        grid-template-columns: initial;
    }
}